{% extends 'base.html' %}
{% load static %}
{% block title %}博客编辑{% endblock %}
{% block content %}
    <link rel="stylesheet" href="{% static 'css/modifyBlog.css' %}">

    <form action="{% url 'learningPlanet:modifyBlog' blog_id=blog_id author_id=author_id %}" method="post"
          enctype="multipart/form-data">
        <div id="modify-head">
            <div class="modifyClass"><span>标题</span> <input type="text" value="{{ title }}" name="title" required></div>
            <div class="modifyClass"><span>分类</span> <input type="text" list="category" value="{{ category }}" required
                                                            name="category"></div>

            <div class="modifyClass"><span class="modifytag">标签1<span class="iconfont">&#xe636;</span></span><input
                    name="tag1" list="tags" type="text" value="{{ tag1 }}"></div>
            <div class="modifyClass"><span class="modifytag">标签2<span class="iconfont">&#xe636;</span></span> <input
                    name="tag2" list="tags" type="text" value="{{ tag2 }}"></div>
            <div class="modifyClass"><span class="modifytag">标签3<span class="iconfont">&#xe636;</span></span> <input
                    name="tag3" list="tags" type="text" value="{{ tag3 }}"></div>
            <datalist id="category" style="max-height: 100px;">
                {% for categoryObj in categoryList %}
                    <option>{{ categoryObj.title }}</option>
                {% endfor %}

            </datalist>
            <datalist id="tags">
                {% for tag in tagsList %}
                    <option>{{ tag.title }}</option>
                {% endfor %}

            </datalist>
            <button type="submit" id="submit">发&nbsp;&nbsp;布</button>
        </div>


        {% comment %}内容框{% endcomment %}
        <script src="{% static '/ckeditor/ckeditor/ckeditor.js' %}" type="text/javascript"></script>
        {% if blog_id == 'add' %}
            {{ blog_form }}
        {% else %}
            <textarea class="ckeditor" name="content">
    {{ content|safe }}
            </textarea>
        {% endif %}
        <style>
            .django-ckeditor-widget {
                width: 100% !important;
            }

            #cke_1_contents {
                min-height: 600px !important;
                position: relative !important;
            }

        </style>
        {% comment %}内容框end{% endcomment %}

        <style>
            #connected-file {
                width: 100%;
                height: 100px;
                display: flex;
            }

            #connected-file .item-file {
                flex: 1;
                position: relative;
                text-align: center;
                line-height: 100px;
                background-color: #3defa2;
                border: 1px solid gray;
                overflow: hidden;
            }

            #connected-file .item-file input {
                width: 100%;
                height: 100%;
                opacity: 0;
                position: absolute;

            }

            #connected-file .item-file .iconfont {
                color: deepskyblue !important;
                font-size: 20px;
            }
        </style>

        <div id="connected-file">
            <div class="item-file"><input type="file" name="connected-file1"><span class="iconfont">附件1&#xe625;</span>
            </div>
            <div class="item-file"><input type="file" name="connected-file2"><span class="iconfont">附件2&#xe625;</span>
            </div>
            <div class="item-file"><input type="file" name="connected-file3"><span class="iconfont">附件3&#xe625;</span>
            </div>
            <div class="item-file"><input type="file" name="connected-file4"><span class="iconfont">附件4&#xe625;</span>
            </div>
            <div class="item-file"><input type="file" name="connected-file5"><span class="iconfont">附件5&#xe625;</span>
            </div>

        </div>
        <script>
            let item_files = document.getElementsByClassName('item-file');
            for (let i = 0; i < item_files.length; i++) {
                let inputTag = item_files[i].getElementsByTagName('input')[0];
                let spanTag = item_files[i].getElementsByTagName('span')[0];
                inputTag.onchange = function () {
                    let fileNameList = '';
                    try {
                        fileNameList = this.value.toString().split('\\');
                    } catch (e) {
                        fileNameList = this.value.toString().split('/');
                    }

                    let fileName = fileNameList[fileNameList.length - 1];
                    fileName = fileName ? fileName : `<span class="iconfont">附件${i + 1}&#xe625;</span>`;
                    spanTag.innerHTML = `${fileName}`;

                }
            }

        </script>


    </form>

    <script type="text/javascript">

        window.onload = function () {
            let submitDiv = document.getElementById('submit');

            function addContent() {
                content = w_e_text.innerHTML;
                let newInput = document.createElement('input');
                newInput.name = 'content';
                newInput.value = content;
                submitDiv.parentNode.appendChild(newInput);
            }

            submitDiv.addEventListener('click', addContent);
        }
    </script>
{% endblock %}
